﻿@model SMEsCustomer360Degree.Models.ViewModels.CustomerManager.CustomerPortfolioViewModel
<div class="">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_content">
                    @Html.Action("SubMenuCustomer", "System")

                    <!--Modal info customer -->
                    <div class="modal fade cm-cp-customer-info" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="col-md-12 profile_details">
                                        <div class="well profile_view">
                                            <div class="col-sm-12">
                                                <h2 id="cust_info_name"></h2>
                                                <p>
                                                    <strong>@SMEsCustomer360Degree.Core.Resources.Resource.IndustryHeader: </strong> <span id="cust_info_industry"></span>
                                                </p>
                                                <ul class="list-unstyled">
                                                    <li><i class="fa fa-building"></i> <strong>@SMEsCustomer360Degree.Core.Resources.Resource.AddressHeader: </strong> <span id="cust_info_address"></span> </li>
                                                    <li><i class="fa fa-envelope"></i> <strong>Email : </strong><span id="cust_info_email"></span></li>
                                                    <li><i class="fa fa-phone"></i> <strong>Office : </strong><span id="cust_info_office"></span></li>
                                                    <li><i class="fa fa-phone"></i> <strong>Land Line : </strong><span id="cust_info_landline"></span></li>
                                                    <li><i class="fa fa-mobile"></i> <strong>Phone : </strong> <span id="cust_info_phone"></span></li>
                                                    <li><i class="fa fa-fax"></i> <strong>Fax : </strong> <span id="cust_info_fax"></span></li>
                                                </ul>
                                            </div>
                                            <div class="col-xs-12 bottom text-center">
                                                <div class="col-xs-12 col-sm-6 emphasis">
                                                    <button type="button" class="btn btn-primary btn-xs">
                                                        <i class="fa fa-user"> </i> @SMEsCustomer360Degree.Core.Resources.Resource.ViewDetailLbl
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /modals -->
                    <!-- start accordion -->
                    <div class="">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="x_panel">
                                    <div class="x_title">
                                        <h2>@SMEsCustomer360Degree.Core.Resources.Resource.YourCust</h2>
                                        <ul class="nav navbar-right panel_toolbox">
                                            <li>
                                                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                            </li>
                                        </ul>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="x_content">
                                        <ul class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
                                            <li id="cm-tc-tc-tab" role="presentation" class="active">
                                                @Html.ActionLink(@SMEsCustomer360Degree.Core.Resources.Resource.TotalCust, "TotalCustomer", "CustomerManager", null, null)
                                            </li>
                                            <li id="cm-tc-nc-tab" role="presentation" class="">
                                                @Html.ActionLink(@SMEsCustomer360Degree.Core.Resources.Resource.NewCust, "NewCustomers", "CustomerManager", null, null)
                                            </li>
                                        </ul>
                                        <div id="cm-search-box" class="col-md-6 cm-search-box">
                                            <div class="col-md-5">
                                                <select class="search_column form-control" tabindex="-1" required>
                                                    <option></option>
                                                </select>
                                                <ul class="parsley-errors-list filled" id="parsley_search_column" style="display:none;">
                                                    <li class="parsley-required">@SMEsCustomer360Degree.Core.Resources.Resource.MessRequiredField</li>
                                                </ul>
                                            </div>
                                            <div class="col-md-7">
                                                <input id="search_textbox" type="text" class="cm_search_textbox form-control" placeholder="Default Input">
                                            </div>
                                        </div>
                                        <table id="cm-customer-total" class="table table-bordered table-striped jambo_table">
                                            <thead class="headings">
                                                <tr>
                                                    <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.CifHeader</th>
                                                    <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.NameHeader</th>
                                                    <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.IndustryHeader</th>
                                                    <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.DateOpenCifHeader</th>
                                                    <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.InfoHeader</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end of accordion -->
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts
{
<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#cm-customer-total').DataTable({
            "order": [[0, 'asc']],
            "bServerSide": true,
            "bProcessing": true,
            "responsive": true,
            "bAutoWidth": false,
            "sAjaxSource": '@Url.Action("TotalCustomerData", "CustomerManager")',
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            'fnCreatedRow': function (nRow, aData, iDataIndex) {
                $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                $('td', nRow).eq(4).attr('id', 'td_' + iDataIndex + '_action');
            },
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
            "sPaginationType": "simple_numbers",//"full_numbers",
            "aoColumns": [
                        { "sName": "CIF", "bSortable": false },
                        { "sName": "NAME", "bSortable": false },
                        { "sName": "VPB INDUSTRY", "bSortable": false },
                        { "sName": "DATE OPEN", "bSortable": false },
                        { "sName": "INFO", "bSortable": false }],
            "aoColumnDefs": [{
                "aTargets": [4],
                "mRender": function (data, type, full) {
                    return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[0] + '\');\"><i class="fa fa-info"></i></a>';
                }
            }]
        });
        var dataSearch = [{ id: 0, text: 'CIF' }, { id: 1, text: 'Name' }, { id: 2, text: 'VPB Insdustry' }];
        $(".search_column").select2({
            placeholder: "Select column",
            data: dataSearch
        });

        table.columns().every(function () {
            var that = this;

            $('#search_textbox').on('keyup change', function () {
                if ($(".search_column").val() == "") {
                    $("#parsley_search_column").show();
                    this.value = "";
                } else {
                    if (that.index() == $(".search_column").val()) {
                        that.search(this.value).draw();
                    }
                }

            });
            $(".search_column").on("change", function (e) {
                $("#parsley_search_column").hide();
                $('#search_textbox').val('');
                that.search('').draw();
            });
        });
    })
</script>
    @if (true)
    {
<script type="text/javascript">
    function showCustomerInfo(cif) {
        $.ajax({
            url: '@Url.Action("CustomerInfo", "CustomerManager")',
            type: "POST",
            data: { cif: cif },
            success: function (data_response) {
                if (data_response.length > 0) {
                    var dataInfo = data_response[0];
                    $('#cust_info_industry').text(dataInfo['industry']);
                    $('#cust_info_name').text(dataInfo['custName']);
                    $('#cust_info_address').text(dataInfo['address']);
                    $('#cust_info_phone').text(dataInfo['phone']);
                    $('#cust_info_fax').text(dataInfo['fax']);
                    $('#cust_info_office').text(dataInfo['office']);
                    $('#cust_info_landline').text(dataInfo['landLine']);
                    $('#cust_info_email').text(dataInfo['email']);
                }
                $('.cm-cp-customer-info').modal('show');
            }
        })

    };
    function startPageTourGuide() {
        var intro = introJs();
        var steps = [
                {
                    element: '#cm-tc-tab',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccountPlanningTab"
                },
                {
                    element: '#cm-cp-tab',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuidePortManTab",
                    position: 'right'
                },
                {
                    element: '#cm-cpr-tab',
                    intro: '@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTable',
                    position: 'bottom'
                },
                {
                    element: '#cm-css-tab',
                    intro: '@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableLength',
                    position: 'right',
                },
                {
                    element: '#cm-c-tab',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableSearch",
                    position: 'bottom'
                },
                {
                    element: '#cm-ca-tab',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRow",
                    position: 'bottom'
                },
                {
                    element: '#cm-top-tab',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                    position: 'left'
                },
                {
                    element: '#cm-tc-tc-tab',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                    position: 'left'
                },
                {
                    element: '#cm-tc-nc-tab',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                    position: 'left'
                },
                {
                    element: '#cm-customer-total',
                    intro: '@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTable',
                    position: 'bottom'
                },
                {
                    element: '#cm-customer-total_length',
                    intro: '@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableLength',
                    position: 'right',
                },
                {
                    element: '#cm-search-box',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableSearch",
                    position: 'bottom'
                },
                {
                    element: '#my_account_planning0',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRow",
                    position: 'bottom'
                },
                {
                    element: '#td_0_action',
                    intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                    position: 'left'
                }
        ];
        intro.setOptions({
            steps: steps,
            showProgress: true,
            scrollToElement: true,
        });
        intro.setOption('tooltipPosition', 'auto');
        intro.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
        intro.start();
    }
</script>
    }
}